<template>
	<view class="cardBox" v-if="loading">
		<view class="flex" style="margin-top: 10rpx;">
			<view class="biao" style="width: 100%;">
				<span class="biao_span">|</span> 
				<text class="cardTitle" >{{$t("货物")}} </text> 
				<view style="clear: both;"></view>
			</view>
		</view>
		<view style="width: 100%;height: 60rpx;position: relative;">
			<!--货物盒  0% 23% 47% 71% 95%-->
			<image :src="HTTP_IMG_UTL+'/goods.png'" 
			style="width: 40rpx;height: 40rpx;position: absolute;top: 10rpx;left: 0;" v-if="order.goods_step.step<=10">
			</image>
			<image :src="HTTP_IMG_UTL+'/goods.png'"
			style="width: 40rpx;height: 40rpx;position: absolute;top: 10rpx;left: 25%;" v-else-if="order.goods_step.step==25">
			</image>
			<image :src="HTTP_IMG_UTL+'/goods.png'"
			style="width: 40rpx;height: 40rpx;position: absolute;top: 10rpx;left: 50%;" v-else-if="order.goods_step.step==50">
			</image>
			<image :src="HTTP_IMG_UTL+'/goods.png'"
			style="width: 40rpx;height: 40rpx;position: absolute;top: 10rpx;left: 75%;" v-else-if="order.goods_step.step==75">
			</image>
			<image :src="HTTP_IMG_UTL+'/goods.png'"
			style="width: 40rpx;height: 40rpx;position: absolute;top: 10rpx;left: 95%;" v-else-if="order.goods_step.step==100">
			</image>
		</view>
		
		<view style="display: flex;width: 100%;">
			<view class="circle">
				<view class="circle_dian" >·</view>
			</view>
			
			<view class="line_process" v-if="order.goods_step.step>=25"></view>
			<view class="line_process1" v-else-if="order.goods_step.step!=25"></view>
			<view class="circle" v-if="order.goods_step.step>=25">
				<view class="circle_dian"  v-if="order.goods_step.step>=25">·</view>
				<view class="circle_dian1"  v-if="order.goods_step.step<25">·</view>
			</view>
			<view class="circle1" v-else-if="order.goods_step.step<25">
				<view class="circle_dian"  v-if="order.goods_step.step>=25">·</view>
				<view class="circle_dian1"  v-if="order.goods_step.step<25">·</view>
			</view>
			
			<view class="line_process" v-if="order.goods_step.step>=50"></view>
			<view class="line_process1" v-else-if="order.goods_step.step!=50"></view>
			<view class="circle" v-if="order.goods_step.step>=50">
				<view class="circle_dian"  v-if="order.goods_step.step>=50">·</view>
				<view class="circle_dian1"  v-if="order.goods_step.step<50">·</view>
			</view>
			<view class="circle1" v-else-if="order.goods_step.step<50">
				<view class="circle_dian"  v-if="order.goods_step.step>=50">·</view>
				<view class="circle_dian1"  v-if="order.goods_step.step<50">·</view>
			</view>
			
			<view class="line_process" v-if="order.goods_step.step>=75"></view>
			<view class="line_process1" v-else-if="order.goods_step.step!=75"></view>
			<view class="circle" v-if="order.goods_step.step>=75">
				<view class="circle_dian"  v-if="order.goods_step.step>=75">·</view>
				<view class="circle_dian1"  v-else-if="order.goods_step.step<75">·</view>
			</view>
			<view class="circle1" v-else-if="order.goods_step.step<75">
				<view class="circle_dian"  v-if="order.goods_step.step>=75">·</view>
				<view class="circle_dian1"  v-else-if="order.goods_step.step<75">·</view>
			</view>
			
			<view class="line_process" v-if="order.goods_step.step==100"></view>
			<view class="line_process1" v-else-if="order.goods_step.step!=100"></view>
			<view class="circle" v-if="order.goods_step.step==100">
				<view class="circle_dian"  v-if="order.goods_step.step>=100">·</view>
				<view class="circle_dian1"  v-else-if="order.goods_step.step!=100">·</view>
			</view>
			<view class="circle1" v-else-if="order.goods_step.step!=100">
				<view class="circle_dian"  v-if="order.goods_step.step==100">·</view>
				<view class="circle_dian1"  v-else-if="order.goods_step.step!=100">·</view>
			</view>
			
		</view>	
		<view class="stock_complete" v-if="order.goods_step.step==100&&order.role==1&&order.orderJoin.is_stop_countdown==0">
			<text class="stock_btn" @click="tanchuang()" v-if="order.orderInfo.type=='goods'&&order.orderInfo.release_info.is_express_price==1">
				{{text.stock_complete}}
			</text>
		</view>
		<view class="stock_complete" v-else-if="order.goods_step.step==100&&order.role==2&&order.orderJoin.is_stop_countdown==0">
			<text class="stock_btn" @click="tanchuang1()" v-if="order.orderInfo.type=='goods'&&order.orderInfo.release_info.is_express_price==1">
				{{text.stock_complete}}
			</text>
		</view>
		<view style="margin-top: 5%;height: 24px;" v-if="order.goods_step.step<100&&order.role==2">
			<view style="float: left;">{{$t("上传进度")}}</view>
			<view style="float: right;">{{step}}%</view>
		</view>
		<view v-if="order.goods_step.step!=100 && order.role==2">
			<!-- <view style="margin-top: 10%;">{{$t("货物进度")}}</view>
			<view  style="margin-top: 20rpx;padding-bottom: 20rpx;border-bottom: 1px solid #ccc;">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}%</view>
				</picker>
			</view> -->
			
			<view v-if="order.goods_step.step<75">
				<view style="margin-top: 5%;clear: both;">{{$t("进度说明")}}</view>
				<view  style="margin-top: 20rpx;padding-bottom: 20rpx;">
					<u-form-item >
						<u-input v-model="title"  :custom-style="{height:'50rpx'}" height="50"  type="text"  :placeholder="$t('请输入进度说明')"/>
					</u-form-item>
				</view>
				
				<view style="margin-top: 5%;">{{$t("上传证明")}}</view>
				<u-upload :upload-text="$t('选择图片')" @on-success="releasePayImgSuccess" :action="releasePayImgAction"
					:file-list="images" max-count="1" :deletable="releasePayImgDeletable"></u-upload>
			</view>
			<view v-else>
				<view style="margin-top: 5%;">{{$t("交货证明")}}</view>
				<u-upload :upload-text="$t('选择图片')" @on-success="releasePayImgSuccess" :action="releasePayImgAction"
					:file-list="images" max-count="1" :deletable="releasePayImgDeletable"></u-upload>
			</view>
			
				
			<view class="stock_complete" @click="completed()">
				<text class="stock_btn">
					{{$t("上传进度")}}
				</text>
			</view>
		</view>

		<block v-for="(item,index) in order.stepList" :key="index" v-if="order.stepList">
			<view>
				<view style="display: flex;width: 100%;margin-top: 30rpx;">
					<view style="width: 60%;display: flex;">
						<view class="circle_dian2" style="color: #999;line-height: 20px;" >·</view>
						<view class="cardTitle2" v-if="item.step=='0%'">{{text.Stock}}</view>
						<view class="cardTitle2" v-if="item.step!='0%'" @click="changeStock(item,index)">
							{{text.Stock2}}{{item.step}}% 
							<text class="jiantou2" v-if="item.status==1" >></text>
							<text class="jiantou2" v-if="item.status==2" >∨</text>
						</view>
					</view>
					<view style="width: 40%;font-size: 12px;line-height: 28px;text-align: right;">
						{{item.createtime}} 
					</view>
				</view>
				<view class="stock_text" v-if="item.status==2&&item.text!=''&&lang=='zh'">
					<view>
						<image :src="item.images" class="nav_image"  @click.stop="preview(item.images,order.stepList,index)"></image>
					</view>
					<view>{{item.title}}</view>
				</view>
				<view class="stock_text" v-else-if="item.status==2&&item.text!=''&&lang=='ru'">
					<view>
						<image :src="item.images" class="nav_image"  @click.stop="preview(item.images,order.stepList,index)"></image>
					</view>
					<view>{{item.title_ru}}</view>
				</view>
			</view>
		</block>
		<block v-if="order.orderInfo.releasePayImgList&&order.orderJoin.releasePayImgList1">
			<view>
				<view style="display: flex;width: 100%;margin-top: 30rpx;">
					<view style="width: 60%;display: flex;">
						<view class="circle_dian2" style="color: #999;line-height: 20px;" >·</view>
						<view class="cardTitle2">{{$t("开始备货")}}</view>
					</view>
					<!-- <view style="width: 40%;font-size: 12px;line-height: 28px;">
						{{item.createtime}} 
					</view> -->
				</view>
				
			</view>
		</block>
		
		<!-- <view class="stock_complete" @click="completed()">
			<text class="stock_btn">
				{{text.stock_complete}}
			</text>
		</view> -->
		
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	
	export default {
		components: {
			
		},
		props: {
			order2: {
				type: [Array, Object, Number, String],
				default: {
					stepList:[],
					goods_step:{}
				}
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				
				//文字
				text:{
					Stock:this.$t('开始备货'),
					Stock2:this.$t('备货进度完成'),
					stock_complete:this.$t('确认完成'),
				},
				
				//备货进度
				Stock_list:[
					{rate:'0%',status:1,text:"",create_at:'2023-06-07 20:05'},
					{rate:'25%',status:1,text:'这里是进度说明这里是进度说明这里是进度说明这里是进度说明',create_at:'2023-06-07 20:05'},
					{rate:'50%',status:1,text:'',create_at:'2023-06-07 20:05'},
					{rate:'75%',status:1,text:'',create_at:'2023-06-07 20:05'},
					{rate:'100%',status:1,text:'',create_at:'2023-06-07 20:05'},
				],
				array: ['25', '50', '75', '100'],
				index: 0,
				title:'',
				images:[],
				releasePayImgAction: HTTP_REQUEST_URL + '/common/upload',
				releasePayImgDeletable: true,
				step:0,
				
				order:{
					stepList:[],
					goods_step:{},
					transport_step:{},
					declaration_step:{},
					clearance_step:{}
				},
				loading:false
			}
		},
		mounted() {
			this.order = this.order2
			if(this.order.stepList==null){
				this.order.stepList = [{ step :0} ]
			}
			if(this.order.goods_step==null){
				this.order.goods_step = { step :0} 
			}
			if(!this.order.goods_step.id){
				this.step=10
			}else{
				if(this.order.goods_step.step==25){
					this.step=50
				}else if(this.order.goods_step.step==50){
					this.step=75
				}else if(this.order.goods_step.step==75){
					this.step=100
				}else if(this.order.goods_step.step==10){
					this.step=25
				}
			}
			
			this.loading = true
		},
		methods:{
			// 预览图片
			preview(e,preImgs,index) {
				let images = []
				preImgs.forEach((item) => {
					images.push(item.images)
				})
				this.$emit('on-oversize', 2)
				uni.previewImage({
					current: index,
					urls: images,
					loop: true,
					longPressActions: true
				})
			},
			releasePayImgSuccess(data, index, lists, name) {
				let formData = [];
				if (lists.length > 0) {
					for (let i = 0; i < lists.length; i++) {
						if (lists[i].response) {
							let temp = {
								url: lists[i].response.data.url
							}
							formData.push(temp)
						} else if (lists[i].url) {
							let temp = {
								url: lists[i].url
							}
							formData.push(temp)
						}
					}
				} else {
					formData = []
				}
				this.images = formData[0].url
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				if(e.detail.value==0){
					this.step = 25
				}else if(e.detail.value==1){
					this.step = 50
				}else if(e.detail.value==2){
					this.step = 75
				}else if(e.detail.value==3){
					this.step = 100
				}
			},
			//进度查看详情
			changeStock(item,index){
				if(this.order.stepList[index].status==1){
					this.order.stepList[index].status=2
				}else{
					this.order.stepList[index].status=1
				}				
			},
			completed(){
				var that = this
				var message = that.$t('确认后将截至对方订单倒计时\n请仔细核实对方是否完成任务')

				if(!that.title&&that.order.goods_step.step<75){
					uni.showModal({
						content: that.$t('请输入进度说明'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
				// console.log(that.images);
				if(that.images.length==0){
					uni.showModal({
						content: that.$t('请上传照片'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false;
				}
				uni.showLoading({
					title: "Loading...",
					mask: true
				})
				that.$u.api.order.upStep({
					order_id: that.order.orderInfo.id,
					order_join_id: that.order.orderInfo.join_order_id,
					images: that.images,
					title:that.title,
					step:that.step,
					role: that.order.role,
					type:1,
					lang:this.lang,
				}).then(res => {
					uni.hideLoading();
					
					that.$u.toast(that.$t('操作成功'), 2000)
					that.$emit('on-oversize', 1);
				})
			},
			tanchuang(){
				var message = this.$t('确认后将截至对方订单倒计时\n请仔细核实对方是否完成任务')
				uni.showModal({ //提醒用户更新
				  title: this.$t('系统提示'),
				  content: message,
				  confirmText: this.$t('是'), // 修改确认按钮文字
				  cancelText: this.$t('否'),  
				  success: (res) => {
					  if (res.confirm) {
						 const that = this
						 that.$u.api.order.tzdjs({
						 	id:that.order.orderInfo.join_order_id
						 }).then(res => {
							 
						 })
						  // 用户点击了确定，执行相应的逻辑
					  } else if (res.cancel) {
						  // 用户点击了取消，执行相应的逻辑
					  }
				  }
				})
			},
			tanchuang1(){
				var message = this.$t('是否提交完成任务请求，对方确认完成后\n订单将会停止倒计时')
				uni.showModal({ //提醒用户更新
				  title: this.$t('系统提示'),
				  content: message,
				  confirmText: this.$t('是'), // 修改确认按钮文字
				  cancelText: this.$t('否'),  
				  success: (res) => {
					  if (res.confirm) {
						 const that = this
						 that.$u.api.order.isQrwc({
						 	id:that.order.orderInfo.join_order_id
						 }).then(res => {
							 
						 })
						  // 用户点击了确定，执行相应的逻辑
					  } else if (res.cancel) {
						  // 用户点击了取消，执行相应的逻辑
					  }
				  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/orderDetail.scss";
</style>